<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .container {
            width: 660px;
            height: 660px;
            background-color: blanchedalmond;
            position: relative;
            margin: 30px auto;
        }
        .container div {
            width: 200px;
            height: 200px;
            position: absolute;
            text-align: center;
            line-height: 200px;
            border: 1px solid #000;
            box-sizing: border-box;
            border-radius: 5px;
        }
        .container div:nth-of-type(1){
            top:10px;
            left:10px;
        }
        .container div:nth-of-type(2){
            top:10px;
            left:230px;
        }
        .container div:nth-of-type(3){
            top:10px;
            left:450px;
        }
        .container div:nth-of-type(4){
            top:230px;
            left:10px;
        }
        .container div:nth-of-type(5){
            top:230px;
            left:230px;
        }
        .container div:nth-of-type(6){
            top:230px;
            left:450px;
        }
        .container div:nth-of-type(7){
            top:450px;
            left:10px;
        }
        .container div:nth-of-type(8){
            top:450px;
            left:230px;
        }
        .container div:nth-of-type(9){
            top:450px;
            left:450px;
        }

    </style>
</head>
<body>
    <div class="container">
        <!-- <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div> -->
    </div>
    <script>
        var objArr = [
            {
                id:1,
                color:"burlywood"
            },{
                id:2,
                color:"brown"    
            },{
                id:3,
                color:"rgb(197, 194, 33)" 
            },{
                id:4,
                color:"rgb(64, 140, 150)" 
            },{
                id:5,
                color:"rgb(43, 122, 19)" 
            },{
                id:6,
                color:"rgb(90, 28, 161)" 
            },{
                id:7,
                color:"rgb(100, 27, 55)" 
            },{
                id:8,
                color:"rgb(55, 8, 223)" 
            },{
                id:9,
                color:"rgb(226, 7, 54)" 
            }
        ] ;
        
        renderDom(objArr);
        function renderDom( objArr ){
            var containerEle = document.querySelector(".container");
            containerEle.innerHTML = '' ;
            objArr.forEach(function(item){
                var divEle = document.createElement("div");
                divEle.innerHTML = `${item.id}` ; 
                divEle.style.backgroundColor = `${item.color}` ; 
                divEle.style.top = `${item.top}` ; 
                divEle.style.left = `${item.left}` ; 
                containerEle.appendChild(divEle);
            });
            divMouseDown();
        }
        function divMouseDown(){
            var containerEle = document.querySelector(".container");
            var containerEleX = containerEle.offsetLeft ; 
            var containerEleY = containerEle.offsetTop ; 
            var divEles = document.querySelectorAll(".container div");
            divEles.forEach(function(divEle,key){
                divEle.onmousedown = function ( event ){

                    divEle.style.transition = "none";

                    divEle.style.zIndex = 10 ; 

                    var e = event || window.event;

                    var divStartX = this.offsetLeft ; 
                    var divStartY = this.offsetTop ;

                    var mouseStartX = e.clientX ;
                    var mouseStartY = e.clientY ; 

                    var x = mouseStartX - divStartX ;
                    var y = mouseStartY - divStartY ;

                    divEle.onmousemove = function(event){
                        var e = event || window.event;
                        var mouseEndX = e.clientX;
                        var mouseEndY = e.clientY;

                        divEle.style.left = mouseEndX - x  + "px";
                        divEle.style.top  = mouseEndY - y +  "px";
                        
                        var newArr = [] ; 
                        divEles.forEach(function( item ){
                            var contactX = Math.abs( divEle.offsetLeft - item.offsetLeft ) - divEle.offsetWidth ; 
                            var contactY = Math.abs( divEle.offsetTop - item.offsetTop ) - divEle.offsetHeight ;
                            if ( contactX > 0 || contactY > 0 ){
                                var area = 0 ; 
                            } else {
                                var area = contactX * contactY ; 
                            }
                            newArr.push( area );
                        });

                        newArr.splice(key,1,0);

                        console.log(key);
                        console.log(newArr);
                        
                        var res = newArr.indexOf(Math.max(...newArr));
                        console.log(res);
                        if ( res != 0 ){
                            var temp = objArr[key] ; 
                            objArr[key] = objArr[res] ; 
                            objArr[res] = temp ;
                            console.log(objArr);
                        }
                    }
                    divEle.onmouseup = function (){
                        divEle.onmousemove = '' ;
                        divEle.style.transition = "all 1s";
                        renderDom( objArr )

                        
                    }
                }
            });
        }
    </script>
</body>
</html>